<template>
    <div class="unpaid" v-title="'订单详情'">
        <!--活动支付-->
        <div class="unpaid-list">
            <div class="title" @click="back()">
                <i class="iconfont icon-fanhui"></i>
                订单详情
            </div>
            <div class="unpaid-list-content">
                <!--1.待支付。2.交易完成。3.交易关闭。4.退款成功。5.退款中-->
                <div class="overTime btn2" v-if="statePay === '1' && hintWin">剩余支付时间{{timeOver}}</div>
                <div class="stateOfPay" v-if="hintWin">
                    <div class="stateName font1" v-if="statePay === '1'">待支付</div>
                    <div class="stateName font1" v-if="statePay === '2'">交易完成</div>
                    <div class="stateName font1" v-if="statePay === '3'">交易关闭</div>
                    <div class="stateName font1" v-if="statePay === '4'">退款成功</div>
                    <div class="stateName font1" v-if="statePay === '5'">退款中</div>
                    <div class="stateName font1" v-if="statePay === '6'">待审核</div>
                    <div class="stateName font1" v-if="statePay === '7'">交易取消</div>
                    <div class="stateName font1" v-if="statePay === '8'">审核已通过</div>
                    <div class="stateName font1" v-if="statePay === '9'">退款已拒绝</div>
                    <div class="stateName font1" v-if="statePay === '10'">审核未通过</div>
                    <div class="stateName font1" v-if="statePay === '11'">退款待审核</div>
                    <div class="stateText">订单编号：{{orderNo}}</div>
                    <div class="stateText">创建时间：{{openTime | stampFormate2}}</div>
                </div>
                <!-- 交易信息  1.orderType 知识。 2.orderType 活动。 3.orderType 会员。 4.orderType 商品 5.orderType 直播  -->
                <!--  1.orderType 知识交易信息  -->
                <div class="orderMes" v-if="orderType === '1' && hintWin">
                    <div class="orderMes-top">交易信息</div>
                    <div class="orderMes-name">{{orderName}}</div>
                    <div class="orderMes-bottom">
                        <img :src="this.$store.state.picHead + orderImg" />
                        <div class="orderMes-text">
                            <p>{{orderWeek}}期（<span v-if="!orderUpdate">更新中</span><span v-else="orderUpdate">已完结</span>）</p>
                            <p>价格：￥{{orderPrice}}</p>
                        </div>
                    </div>
                </div>
                <!--  2.orderType 活动。  -->
                <div class="orderMes" @click="goActivity()" v-if="orderType === '2' && hintWin">
                    <div class="orderMes-top">交易信息</div>
                    <div class="orderMes-name">{{orderName}}</div>
                    <div class="orderMes-bottom">
                        <img :src="this.$store.state.picHead + orderImg" />
                        <div class="orderMes-text">
                            <p>时间：{{orderTime | stampFormate2}}</p>
                            <p>地址：{{orderAddress}}</p>
                            <p>票价：￥{{orderPrice}}</p>
                            <p>张数：{{orderNum}}</p>
                        </div>
                    </div>
                </div>
                <!--3.orderType 会员交易信息-->
                <div class="orderMes" v-if="orderType === '3' && hintWin" >
                    <div class="orderMes-top">交易信息</div>
                    <div class="orderMes-name">{{orderName}}</div>
                    <div class="orderMes-user">价格：{{orderPrice / 100}}元/<span v-if="orderPer === '1'">年</span><span v-if="orderPer === '2'">月</span></div>
                    <div class="orderMes-user">到期时间：{{orderTime |stampFormate2}}</div>
                </div>
                <!-- 4.orderType 商品 -->
                <div class="orderMes" v-if="orderType === '4' && hintWin" >
                    <div class="orderMes-top">交易信息</div>
                    <div class="orderMes-name">{{orderName}}</div>
                    <div class="orderMes-bottom">
                        <img :src="orderImg" />
                        <div class="orderMes-text">
                            <p>规格名称：{{orderSpec}}</p>
                            <p>价格：￥{{orderPrice}}</p>
                            <p>数量：{{orderNum}}</p>
                        </div>
                    </div>
                </div>
                <!-- 5.orderType 直播 -->
                <div class="orderMes" v-if="orderType === '5' && hintWin" >
                    <div class="orderMes-top">交易信息</div>
                    <div class="orderMes-name">{{orderName}}</div>
                    <div class="orderMes-bottom">
                        <img :src="$store.state.picHead + orderImg" />
                        <div class="orderMes-text">
                            <p>时间：{{orderTime | stampFormate2}}</p>
                            <p>价格：￥{{orderPrice}}</p>
                        </div>
                    </div>
                </div>

                <!--电子票-->
                <div class="detail" v-if="orderType === '2' && hintWin && ticet" @click="goTicket()">
                    <div class="detail-top">电子票</div>
                    <div class="E-ticket">
                        <div class="E-ticket-left">
                            <p>电子票号：{{eTicker}}</p>
                            <p>状态：
                                <span v-if="eTickerData == '1'">待使用</span>
                                <span v-if="eTickerData == '2'">已使用</span>
                                <span v-if="eTickerData == '3'">已过期</span>
                                <span v-if="eTickerData == '4'">退票中</span>
                                <span v-if="eTickerData == '5'">已退票</span>
                                <span v-if="eTickerData == '6'">不同意退票</span>
                            </p>
                            <!--1.待使用。2.已使用。3.已过期。4.不可用。-->
                        </div>
                        <div class="E-ticket-right">
                            <img src="../../assets/image/erwei.png"/>
                            <i class="iconfont icon-fanhui"></i>
                        </div>
                    </div>
                </div>

                <!--订单明细-->
                <div class="detail" v-if="(orderType === '1' || orderType === '2' || orderType === '3'|| orderType === '5') && hintWin">
                    <div class="detail-top">订单明细</div>
                    <div class="detailPrice">商品金额：<span>￥{{detailMoneyAll}}</span></div>
                    <div class="detailPrice" v-if="detailIntegral">使用积分：<span>￥{{detailIntegral}}</span></div>
                    <div class="detailPrice2">实付款：<span class="font1">￥{{detailMoneyAll}}</span></div>
                </div>

                <!--返还积分-->
                <div class="integral" v-if="orderType === '2' && integral  && hintWin">返 <span>{{integral}}</span> 积分</div>

                <!--退款详情-->
                <div class="detail" v-if="orderType === '4' && hintWin">
                    <div class="detail-top">退款详情</div>
                    <div class="detailPrice">退款总金额：<span>￥{{detailMoneyAll}}</span></div>
                    <div class="detailPrice2">原路返回：<span>￥{{detailMoneyAll}}</span></div>
                </div>

                <!--退款原因-->
                <div class="detail" v-if="orderType === '4'|| orderType === '2' && statePay === '9'|| statePay === '5'|| statePay === '4' || statePay === '11' && hintWin">
                    <div class="detail-top">退款原因</div>
                    <div class="refundReason">{{refundReason}}</div>
                </div>

                <!--拒绝原因-->
                <div class="detail" v-if="orderType === '4'|| orderType === '2' && hintWin && statePay === '9'">
                    <div class="detail-top">拒绝原因</div>
                    <div class="refundReason">{{refuseReason}}</div>
                </div>

                <!--下单信息-->
                <div class="detail detailMes"  v-if="(orderType === '1' || orderType === '2' || orderType === '3') && hintWin">
                    <div class="detail-top">下单信息</div>
                    <div class="detailName" v-for="item,index of applyInfo" v-if="item">{{index}}<span>{{item}}</span></div>
                    <!--<div class="detaiAddress">{{detailAddress}}</div>-->
                </div>
                <!--(活动)申请退款交易信息-->
                <div class="orderMes" v-if="!hintWin && orderType === '2' || orderType === '10' || orderType === '11'">
                    <div class="orderMes-top">交易信息</div>
                    <div class="orderMes-name">{{orderName}}</div>
                    <div class="orderMes-bottom">
                        <img :src="this.$store.state.picHead + orderImg" />
                        <div class="orderMes-text">
                            <p>时间：{{orderTime | stampFormate2}}</p>
                            <p>地址：{{orderAddress}}</p>
                            <p>票价：￥{{orderPrice}}</p>
                            <p>张数：{{orderNum}}</p>
                        </div>
                    </div>
                    <div class="applyBack">退款金额：<span>￥{{orderPrice}}</span></div>
                </div>

                <!--(商品)申请退款交易信息-->
                <div class="orderMes" v-if="orderType === '4' && !hintWin">
                    <div class="orderMes-top">交易信息</div>
                    <div class="orderMes-name">{{orderName}}</div>
                    <div class="orderMes-bottom">
                        <img :src="orderImg" />
                        <div class="orderMes-text">
                            <p>规格名称：{{orderSpec}}</p>
                            <p>价格：￥{{orderPrice}}</p>
                            <p>数量：{{orderNum}}</p>
                        </div>
                    </div>
                    <div class="applyBack">退款金额：<span>￥{{orderPrice}}</span></div>
                </div>

                <!--退款原因-->
                <div class="cause" v-if="!hintWin">
                    <div class="cause-top">退款原因<span>*</span></div>
                    <div class="cause-text">
                        <textarea v-model="causeText" placeholder="请详细填写退款的原因，方便更快的给您通过审核"></textarea>
                    </div>
                </div>

                <!--提交申请退款的确认按钮-->
                <div class="refundYes btn1"  v-if="!hintWin" @click="refundOk()">提交申请</div>
            </div>
            <!--去支付-->
            <div class="unpaidBtn" v-if="statePay === '1' && hintWin">
                <div class="unpaidBtn-yes btn1" @click="goPay()">去支付</div>
                <div class="unpaidBtn-no btn2" @click="nopage()">取消订单</div>
            </div>
            <!--申请退款-->
            <div class="unpaidBtn" v-if="statePay === '2' && !hintShow && hintWin && DontRefund && refund">
                <div class="refund btn-line" @click="hintBackpay()">申请退款</div>
            </div>
            <div class="unpaidBtn" v-if="statePay === '9' && !hintShow && hintWin && DontRefund && refund">
                <div class="refund btn-line" @click="hintBackpay()">申请退款</div>
            </div>
            <!--提交成功弹窗-->
            <div class="hint" v-if="hintShow">
                <p><i class="iconfont icon-icon_right"></i></p>
                <p>提交成功</p>
            </div>
            <!---删除订单弹窗-->
            <div class="delectBox" v-if="delAct">
                <div class="delectBox-top">确认取消该订单吗？</div>
                <div class="delectBox-btn">
                    <div class="yes" @click="delAdd()">确认</div>
                    <div class="no" @click="delAddNo()">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /* 页面用到的js */
    import {userService} from '../../service/userService'
    export default {
        data () {
            return {
                min:'',//倒计时分
                sec:'',//倒计时秒
                statePay:'',//1.待支付。2.交易完成。3.交易关闭。4.退款成功。5.退款中。
                orderType:'',//判断展示类型  1.orderType 知识。 2.orderType 活动。 3.orderType 会员。 4.orderType 商品 5.orderType 直播
                orderNo:'',//订单编号
                orderName:'',//订单信息中的名字
                openTime:'',//订单建立时间
                orderTime:'',//订单信息中的时间
                orderAddress:'',//订单信息中的地址
                orderImg:'',//订单信息中的图片
                orderPrice:'',//订单信息中的地址
                orderNum:'',//订单信息中的票数
                orderWeek:'',//知识订单中的期数
                orderUpdate:true,//知识订单中是否完结
                orderPer:'',//判断会员订单中是年是月
                orderSpec:'',//商品规格
                eTicker:'',//电子票号
                eTickerData:'',//电子票状态 1.待使用。2.已使用。3.已过期。4.不可用。
                detailMoney:'',//订单商品原价价格
                detailMoneyAll:'',//订单总价
                detailIntegral:'',//订单商品价格
                detailPay:'',//订单实际付款
                detailName:'',//订单用户姓名
                detailPhone:'',//订单用户手机号
                detailAddress:'',//订单用户地址
                integral:'',//返还的积分
                refundReason:'',//退款原因
                refuseReason:'',//拒绝原因
                causeText:'',//申请退款的原因
                hintShow:false,//申请退款弹窗
                hintWin:true,//申请退款样式
                timeOver:0,//倒计时
                ticet:false,//有无电子票,
                DontRefund:false,//退款是否是0元
                orderTypeId:'',//活动号
                delAct:false,//删除提示
                refund:false,//判断是否能退款
                applyInfo:'',//判断是否能退款
            }
        },
        mounted:function(){
            let that = this;
            that.orderNo = this.$route.params.orderNo;
            that.orderType = this.$route.params.type;
            if(!that.orderNo){
                that.orderNo = window.localStorage.getItem("payOrderNo");
            }
            if(!that.orderType){
                that.orderType = window.localStorage.getItem("orderType");
            }
            //VIP会员
            if(that.orderType === '3'){
                userService.orderItem(that.orderNo).then(function (res) {
                    if(res.data.success){
                        let state = res.data.datas;
                        //1.待支付。2.待审核。3.已付款。4.已取消。5.交易关闭。6.退款待审核。7退款中。
                        //8.退款失败。9.已通过退款申请。10.审核不通过。11.退款申请中。12.退款被拒绝。
                        //13.撤销退款申请。14.订单支付超时。15.退款成功。16.待领取。17.待发货。18.已发货。19.交易完成。
                        if(state.status === 1){//待支付
                            that.statePay = '1';
                            let nowDate = new Date().getTime();
                            let timeOver = res.data.datas.expireTime;
                            let tt = parseInt((timeOver - nowDate) / 1000);
                            if(parseInt((timeOver - nowDate) / 1000) <= 0){
                                that.sec = 0;
                                that.time();
                            }else{
                                that.sec = parseInt((timeOver - nowDate) / 1000);
                                that.time();
                            }
                        }else if(state.status === 19 || state.status === 3){//交易完成
                            that.statePay = '2';
                        }else if(state.status === 4){//交易取消
                            that.statePay = '7';
                        }else if(state.status === 15){//退款成功
                            that.statePay = '4';
                        }else if(state.status === 7){//退款中
                            that.statePay = '5';
                        }else if(state.status === 2){//待审核
                            that.statePay = '6';
                        }else if(state.status === 5){//交易关闭
                            that.statePay = '3';
                        }else if(state.status === 9){//审核已通过
                            that.statePay = '8';
                        }else if(state.status === 6){//退款待审核
                            that.statePay = '11';
                        }
                        //订单编号
                        that.orderNo = state.orderNo;
                        that.openTime = state.createTime
                        that.orderName = state.orderDetails[0].name;
                        that.orderPrice = state.orderDetails[0].price;
                        that.orderTime = state.orderDetails[0].endTime
                        that.detailMoney = state.orderDetails[0].price * state.orderDetails[0].timeNum;
                        that.detailMoneyAll = state.amount;
                        that.applyInfo = state.orderDetails[0].applyInfo
                        let userId = state.userId
                        userService.myCenter().then(function(res){
                            let user = res.data.datas.user;
                            that.detailName = that.detailName || user.name;
                            that.detailPhone = that.detailPhone || user.phone;
                            if(user.addresses){
                                for(let i=0;i<user.addresses.length;i++){
                                    if(user.addresses[i].defaultAdress){
                                        that.detailAddress = user.addresses[i].provinceName + user.addresses[i].cityName + user.addresses[i].districtName +  user.addresses[i].detailAdress;
                                        return that.detailAddress
                                    }
                                }
                            }

                        })
                    }else{
//                        alert(res.data.message)
                    }
                })
                //知识订单
            }else if(that.orderType === '1'){
                userService.orderItem(that.orderNo).then(function(res){
                    if(res.data.success){
                        let state = res.data.datas;
                        //1.待支付。2.待审核。3.已付款。4.已取消。5.交易关闭。6.退款待审核。7退款中。
                        //8.退款失败。9.已通过退款申请。10.审核不通过。11.退款申请中。12.退款被拒绝。
                        //13.撤销退款申请。14.订单支付超时。15.退款成功。16.待领取。17.待发货。18.已发货。19.交易完成。
                        if(state.status === 1){//待支付
                            that.statePay = '1';
                            let nowDate = new Date().getTime();
                            let timeOver = res.data.datas.expireTime;
                            let tt = parseInt((timeOver - nowDate) / 1000);
                            if(parseInt((timeOver - nowDate) / 1000) <= 0){
                                that.sec = 0;
                                that.time();
                            }else{
                                that.sec = parseInt((timeOver - nowDate) / 1000);
                                that.time();
                            }
                        }else if(state.status === 19 || state.status === 3){//交易完成
                            that.statePay = '2';
                        }else if(state.status === 4){//交易取消
                            that.statePay = '7';
                        }else if(state.status === 15){//退款成功
                            that.statePay = '4';
                        }else if(state.status === 7 || state.status === 6){//退款中
                            that.statePay = '5';
                        }else if(state.status === 2){//待审核
                            that.statePay = '6';
                        }else if(state.status === 5){//交易关闭
                            that.statePay = '3';
                        }
                        //订单编号
                        that.orderNo = state.orderNo;
                        that.orderImg = state.orderDetails[0].cover;
                        that.orderWeek = state.orderDetails[0]
                        that.openTime = state.createTime
                        that.orderName = state.orderDetails[0].name;
                        that.orderTime = state.orderDetails[0].endTime
                        that.detailMoney = state.orderDetails[0].price
                        that.detailMoneyAll = state.amount;
                        that.orderUpdate = state.orderDetails[0].stopUpdate;
                        that.orderWeek = state.orderDetails[0].singleNum==null?0:state.orderDetails[0].singleNum;
                        let userId = state.userId
                        that.applyInfo = state.orderDetails[0].applyInfo
                        userService.myCenter().then(function(res){
                            let user = res.data.datas.user;
                            that.detailName = that.detailName || user.name;
                            that.detailPhone = that.detailPhone || user.phone;
                            if(user.addresses){
                                for(let i=0;i<user.addresses.length;i++){
                                    if(user.addresses[i].defaultAdress){
                                        that.detailAddress = user.addresses[i].provinceName + user.addresses[i].cityName + user.addresses[i].districtName +  user.addresses[i].detailAdress;
                                        return that.detailAddress
                                    }
                                }
                            }
                        })
                    }else{
//                        alert(res.data.message)
                    }
                })
            }else if(that.orderType === '5'){
                //直播
                userService.orderItem(that.orderNo).then(function (res) {
                    if(res.data.success){
                        let details = res.data.datas
                        that.orderName = details.orderDetails[0].liveTitle;
                        that.orderTime = details.orderDetails[0].liveStartTime
                        that.applyInfo = details.orderDetails[0].applyInfo
                        that.orderPrice = that.moneyNo(details.orderDetails[0].needFee);
                        that.orderImg = details.orderDetails[0].liveCover;
                        that.orderNo = details.orderNo;
                        that.openTime = details.createTime
                        that.detailMoney = that.moneyNo(details.orderDetails[0].totalFee);
                        that.detailMoneyAll = that.moneyNo(details.orderDetails[0].needFee);
                        if(state.status === 1){//待支付
                            that.statePay = '1';
                            let nowDate = new Date().getTime();
                            let timeOver = res.data.datas.expireTime;
                            let tt = parseInt((timeOver - nowDate) / 1000);
                            if(parseInt((timeOver - nowDate) / 1000) <= 0){
                                that.sec = 0;
                                that.time();
                            }else{
                                that.sec = parseInt((timeOver - nowDate) / 1000);
                                that.time();
                            }
                        }else if(state.status === 19 || state.status === 3){//交易完成
                            that.statePay = '2';
                        }else if(state.status === 4){//交易取消
                            that.statePay = '7';
                        }else if(state.status === 15){//退款成功
                            that.statePay = '4';
                        }else if(state.status === 7 || state.status === 6){//退款中
                            that.statePay = '5';
                        }else if(state.status === 2){//待审核
                            that.statePay = '6';
                        }else if(state.status === 5){//交易关闭
                            that.statePay = '3';
                        }
                        //1.待支付。2.待审核。3.已付款。4.已取消。5.交易关闭。6.退款待审核。7退款中。
                        //8.退款失败。9.已通过退款申请。10.审核不通过。11.退款申请中。12.退款被拒绝。
                        //13.撤销退款申请。14.订单支付超时。15.退款成功。16.待领取。17.待发货。18.已发货。19.交易完成。
                    }else{
//                        alert(res.data.message)
                    }
                })
            }else if(that.orderType === '2'){//活动
                userService.orderItem(that.orderNo).then(function (res) {
                    that.refund = res.data.datas.refund;
                    if(res.data.success){
                        that.orderTypeId = res.data.datas.orderTypeId;
                        let state = res.data.datas;
                        //1.待支付。2.待审核。3.已付款。4.已取消。5.交易关闭。6.退款待审核。7退款中。
                        //8.退款失败。9.已通过退款申请。10.审核不通过。11.退款申请中。12.退款被拒绝。
                        //13.撤销退款申请。14.订单支付超时。15.退款成功。16.待领取。17.待发货。18.已发货。19.交易完成。
                        if(state.status === 1){//待支付
                            that.statePay = '1';
                            let nowDate = new Date().getTime();
                            let timeOver = res.data.datas.expireTime;
                            let tt = parseInt((timeOver - nowDate) / 1000);
                            if(parseInt((timeOver - nowDate) / 1000) <= 0){
                                that.sec = 0;
                                that.time();
                            }else{
                                that.sec = parseInt((timeOver - nowDate) / 1000);
                                that.time();
                            }
                        }else if(state.status === 19 || state.status === 3){//交易完成
                            that.statePay = '2';
                        }else if(state.status === 4){//交易取消
                            that.statePay = '7';
                        }else if(state.status === 15){//退款成功
                            that.statePay = '4';
                        }else if(state.status === 7){//退款中
                            that.statePay = '5';
                        }else if(state.status === 2){//待审核
                            that.statePay = '6';
                        }else if(state.status === 5){//交易关闭
                            that.statePay = '3';
                        }else if(state.status === 12){//退款已拒绝
                            that.statePay = '9';
                        }else if(state.status === 10){//审核未通过
                            that.statePay = '10';
                        }else if(state.status === 6){//退款待审核
                            that.statePay = '11';
                        }
                        //订单编号
                        that.orderNo = state.orderNo;
                        that.openTime = state.createTime
                        that.orderName = state.orderDetails[0].actName;
                        that.orderTime = state.orderDetails[0].actStartTime
                        that.detailMoney = state.orderDetails[0].price * state.orderDetails[0].timeNum;
                        that.detailMoneyAll = state.amount;
                        that.orderAddress = state.orderDetails[0].address;
                        that.orderPrice = state.orderDetails[0].ticketPrice / 100;
//                        console.log(state.refundLogs)
                        if(state.refundLogs != null){
                            that.refundReason = state.refundLogs[0].refundReason;
                        }
                        if(state.refundLogs != null){
                            that.refuseReason = state.refundLogs[0].refuseReason;
                        }
                        if(that.orderPrice === 0){
                            that.DontRefund = false;
                        }else{
                            that.DontRefund = true;
                        }
                        that.orderNum = state.orderDetails[0].ticketNum;
                        that.orderImg = state.orderDetails[0].activityPoster;
                        that.detailMoney = that.orderPrice;
                        that.detailMoneyAll = that.orderPrice * that.orderNum;
                        let userId = state.userId;
                        that.applyInfo = state.orderDetails[0].applyInfo
                        userService.myCenter().then(function(res){
                            let user = res.data.datas.user;
                            if(user.addresses){
                                for(let i=0;i<user.addresses.length;i++){
                                    if(user.addresses[i].defaultAdress){
                                        that.detailAddress = user.addresses[i].provinceName + user.addresses[i].cityName + user.addresses[i].districtName +  user.addresses[i].detailAdress;
                                        return that.detailAddress
                                    }
                                }
                            }
                        });
                        //电子票获取
                        let order1 = that.$route.params.orderNo;
                        userService.getTicket(order1).then(function(res){
                            if(res.data.datas.length !== 0){
                                let ticket = res.data.datas[0]
                                that.ticet = true;
                                that.eTicker = ticket.ticketNo;
                                that.eTickerData = ticket.status
                            }else{
                                that.ticet = false;
                            }
                        })
                    }else{
//                        alert(res.data.message)
                    }
                })
            }else if(that.orderType === '10' || that.orderType === '11'){//退款状态
                userService.orderItem(that.orderNo).then(function (res) {
                    if(res.data.success){
                        let state = res.data.datas;
                        //1.待支付。2.待审核。3.已付款。4.已取消。5.交易关闭。6.退款待审核。7退款中。
                        //8.退款失败。9.已通过退款申请。10.审核不通过。11.退款申请中。12.退款被拒绝。
                        //13.撤销退款申请。14.订单支付超时。15.退款成功。16.待领取。17.待发货。18.已发货。19.交易完成。
                        if(state.status === 1){//待支付
                            that.statePay = '1';
                            let nowDate = new Date().getTime();
                            let timeOver = res.data.datas.expireTime;
                            let tt = parseInt((timeOver - nowDate) / 1000);
                            if(parseInt((timeOver - nowDate) / 1000) <= 0){
                                that.sec = 0;
                                that.time();
                            }else{
                                that.sec = parseInt((timeOver - nowDate) / 1000);
                                that.time();
                            }
                        }else if(state.status === 19 || state.status === 3){//交易完成
                            that.statePay = '2';
                        }else if(state.status === 4){//交易取消
                            that.statePay = '7';
                        }else if(state.status === 15){//退款成功
                            that.statePay = '4';
                        }else if(state.status === 7 || state.status === 6){//退款中
                            that.statePay = '5';
                        }else if(state.status === 2){//待审核
                            that.statePay = '6';
                        }else if(state.status === 5){//交易关闭
                            that.statePay = '3';
                        }
                        //订单编号
                        that.orderNo = state.orderNo;
                        that.openTime = state.createTime
                        that.orderName = state.orderTitle;
                        that.orderTime = state.orderDetails[0].actStartTime
                        that.detailMoney = state.orderDetails[0].price * state.orderDetails[0].timeNum;
                        that.detailMoneyAll = state.amount;
                        that.orderAddress = state.orderDetails[0].address;
                        that.orderPrice = state.orderDetails[0].ticketPrice / 100;
                        if(that.orderPrice === 0){
                            that.DontRefund = false;
                        }else{
                            that.DontRefund = true;
                        }
                        that.orderNum = state.orderDetails[0].ticketNum;
                        that.orderImg = state.orderDetails[0].activityPoster;
                        that.detailMoney = that.orderPrice;
                        that.detailMoneyAll = that.orderPrice * that.orderNum;
                        let userId = state.userId;
                        userService.myCenter().then(function(res){
                            let user = res.data.datas.user;
                            if(user.addresses){
                                for(let i=0;i<user.addresses.length;i++){
                                    if(user.addresses[i].defaultAdress){
                                        that.detailAddress = user.addresses[i].provinceName + user.addresses[i].cityName + user.addresses[i].districtName +  user.addresses[i].detailAdress;
                                        return that.detailAddress
                                    }
                                }
                            }
                        });
                        that.detailName = state.orderDetails[0].applyName;
                        that.detailPhone = state.orderDetails[0].applyPhone;
                        //电子票获取
                        let order1 = that.$route.params.orderNo;
                        userService.getTicket(order1).then(function(res){
                            if(res.data.datas.length !== 0){
                                let ticket = res.data.datas[0]
                                that.ticet = true;
                                that.eTicker = ticket.ticketNo;
                                that.eTickerData = ticket.status
                            }else{
                                that.ticet = false;
                            }
                        })
                    }else{
//                        alert(res.data.message)
                    }
                })
                that.hintBackpay()
            }
        },
        methods: {
            //删除订单
            delAdd:function(){
                let that = this;
                that.delAct = false;
                let shopId = window.localStorage.getItem('pathId');
                let orderNo = this.$route.params.orderNo;
                userService.noPay(orderNo).then(function(res){
                    if(res.data.success){
                        window.location.href = '/payment/'+orderNo+'/'+ that.orderType;
                    }else{
                        alert('取消失败');
                    }
                })
            },
            delAddNo:function(){
                let that = this;
                that.delAct = false;
            },
//            申请退款
            hintBackpay(){
                this.hintWin = false;//申请退款页
            },
//            提交退款的确认按钮
            refundOk(){
                let that = this
                let orderNo = this.$route.params.orderNo
                let shopId = window.localStorage.getItem('pathId')
                if(this.causeText){
                    userService.orderRefund(orderNo,{reason:that.causeText}).then(function(res){
                        if(res.data.success){
                            that.hintShow = true;//申请成功提示弹窗
                            setTimeout(function(){
                                that.hintWin = 1;//申请退款页关闭
                                window.location.href = '/payment/'+orderNo+'/2';
                            },500)
                        }else{
                            alert(res.data.message)
                        }
                    });
                }else{
                    alert('请填写退款原因')
                }
            },
            //转换价格
            moneyNo(number){
                let that = this;
                return  isNaN(number) ? 0.00 : parseFloat((number/100).toFixed(2));
            },
            //计时器
            time:function(){
                let that = this;
                let s = that.sec;
                let timeOver = that.timeOver;
                let y,m,d,min,second;
                min = Math.floor(s / 60);
                second = s % 60;
                if (second < 10) { second = '0' + second;}
                if (min < 10) { min = '0' + min;}
                timeOver = min + '分' + second + '秒';
                that.timeOver = timeOver;
                let settime = setInterval(function(){
                    s -=1;
                    min = Math.floor(s / 60);
                    second = s % 60;
                    if (second < 10) { second = '0' + second;}
                    if (min < 10) { min = '0' + min;}
                    if(parseInt(min) <= 0 && parseInt(second) <= 0){
                        min = '00';
                        second = '00';
//                        alert('时间到');
                        that.statePay = '3';
                        clearTimeout(settime)
                        //这里到时间的方法
                    }
                    timeOver = min + '分' + second + '秒';
                    that.timeOver = timeOver;
                    return that.timeOver
                },1000);
            },
            //上一页返回值
            back:function(){
                let that = this;
                if(String(this.hintWin)==='1'){
                    that.$router.push({name:'myOrders'});
                }else if(this.hintWin==false){
                    if(that.orderType === '11'){
                        that.$router.push({name:'myOrders'});
                    }else{
                        this.hintWin = 1
                    }
                }else{
                    let i = that.$store.state.fromPath.length
                    if(that.$store.state.fromPath[i-2]=='home'){
                        that.$router.push({name:'home'});
                    }else{
                        that.$router.push({path:that.$store.state.fromPath[i-2]});
                    }


                    /*console.log(i,String(that.$store.state.fromPath),'to');
                    console.log(i,that.$store.state.fromPath[i-1],'to');
                    if(that.$store.state.fromPath[i-1].indexOf('ticket')>-1) {
                        that.$router.go(-3)
                    }else{
                        that.$router.go(-1)
                    }*/
                }
            },
            //取消订单
            nopage:function(){
                let that = this;
                that.delAct = true;
            },
            //跳转电子票页
            goTicket:function(){
                let that = this;
                let order2 = that.$route.params.orderNo
                that.$router.push({name:'ticket',parmas:{orderNo:order2}})
            },
            //去支付
            goPay:function(){
                let that = this;
                let shopId = window.localStorage.getItem('pathId');
                let orderNo = this.$route.params.orderNo;
                let type = this.$route.params.type;
                window.localStorage.removeItem('checked')
                window.location.href = '/pay/'+orderNo+'/'+type;
            },
            //去活动详情页
            goActivity:function(){
                let that = this;
                let type = this.$route.params.type;
                that.$router.push({name:'activity',params:{actId:that.orderTypeId}})
            }
        },
    }
</script>

<style lang="less">
    body {
        background: #f9f9f9;
    }
    .unpaid-list{
        width:100%;
        height:100vh;
        position: relative;
        margin:auto;
        background:#fff;
        overflow:scroll;
        .title{
            width:100%;
            height: 1.1733rem;
            line-height: 1.1733rem;
            text-align: center;
            font-size: 0.48rem;
            color: #333;
            letter-spacing: 0.3px;
            position: absolute;
            top:0;
            background: #fff;
            border-bottom: 1px solid rgba(221, 221, 221, 0.5);
            z-index:100;
            i{
                font-size: .5rem;
                color: #999;
                text-align: left;
                position: absolute;
                top: 0;
                left: 0.2667rem;
            }
        }
        .unpaid-list-content{
            width:100%;
            position:absolute;
            top:1.1733rem;
            padding-bottom:1.5rem;
            .overTime{
                width:100%;
                height:0.93rem;
                line-height:0.93rem;
                text-align: center;
                background: #F0F7FF;
                box-shadow: inset 0 0 0 0 #D3DCE6;
                font-size: 13px;
                color: #6699FF;
                letter-spacing: 0;
            }
            .stateOfPay{
                width:100%;
                height:2.85rem;
                background:#fff;
                margin-top:0.13rem;
                padding:0.2rem 0.53rem;
                box-sizing: border-box;
                .stateName{
                    width:100%;
                    height:0.99rem;
                    line-height:0.99rem;
                    font-size: 16px;
                    color: #6699FF;
                    font-weight: bold;
                    letter-spacing: 0;
                }
                .stateText{
                    width:100%;
                    height:0.67rem;
                    line-height:0.67rem;
                    font-size: 14px;
                    color: #666666;
                    letter-spacing: 0;
                }
            }
            .orderMes{
                width:100%;
                padding: 0 0.5333rem 0.59rem;
                margin-top: 0.1333rem;
                background: #fff;
                box-sizing: border-box;
                .orderMes-top{
                    width:100%;
                    height:1.07rem;
                    line-height:1.07rem;
                    font-size: 14px;
                    color: #333333;
                    letter-spacing: 0;
                }
                .orderMes-name{
                    width:100%;
                    margin-bottom: 0.24rem;
                    line-height: 0.5867rem;
                    text-align: left;
                    font-size: 0.4267rem;
                    color: #333;
                    font-weight: bold;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    display:-webkit-box;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2;
                }
                .orderMes-user{
                    width:100%;
                    font-size: 12px;
                    color: #666666;
                    line-height:0.8rem;
                }
                .orderMes-bottom{
                    width:100%;
                    margin-top:0.27rem;
                    overflow: hidden;
                    img{
                        width:3.2rem;
                        height:2.13rem;
                        float:left;
                    }
                    .orderMes-text{
                        width:5.4rem;
                        float:left;
                        p{
                            line-height:0.52rem;
                            font-size: 12px;
                            color: #666666;
                            margin-left:0.27rem;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .applyBack{
                    width:100%;
                    height:0.53rem;
                    line-height:0.53rem;
                    font-size: 13px;
                    color: #333333;
                    border-top:1px solid #D3DCE6;
                    margin-top:0.53rem;
                    padding-top:0.27rem;
                    span{
                        float:right;
                        font-size: 15px;
                        color: #6699FF;
                    }
                }
            }
            .cause{
                width:100%;
                padding: 0 0.5333rem 0.59rem;
                margin-top: 0.1333rem;
                background: #fff;
                box-sizing: border-box;
                .cause-top{
                    width: 100%;
                    height: 1.07rem;
                    line-height: 1.07rem;
                    font-size: 14px;
                    color: #333333;
                    letter-spacing: 0.23px;
                    span{
                        color:red;
                    }
                }
                .cause-text{
                    width:100%;
                    height:2.13rem;
                    textarea{
                        width:100%;
                        height:100%;
                        background: #FFFFFF;
                        border: 1px solid #DDDDDD;
                        resize : none;
                        outline: none;
                        padding:0.27rem;
                        box-sizing: border-box;
                        font-size:14px;
                    }
                }
            }
            .refundYes{
                width:89%;
                height:1.2rem;
                line-height:1.2rem;
                color:#fff;
                text-align: center;
                margin:1.07rem auto;
                background: #6699FF;
                border-radius: 100px;
                font-size: 16px;
                letter-spacing: 0;
            }
            .detail{
                width:100%;
                padding: 0 0.5333rem 0.59rem;
                margin-top: 0.1333rem;
                background: #fff;
                box-sizing: border-box;
                .detail-top{
                    width: 100%;
                    height: 1.07rem;
                    line-height: 1.07rem;
                    font-size: 14px;
                    color: #333333;
                    letter-spacing: 0;
                }
                .refundReason{
                    font-size: 13px;
                    color: #333333;
                    letter-spacing: 0;
                }
                .E-ticket{
                    width:100%;
                    overflow: hidden;
                    .E-ticket-left{
                        width:5.3rem;
                        float:left;
                        p{
                            line-height:0.6rem;
                            font-size: 14px;
                            color: #333333;
                            span{
                                font-size: 14px;
                            }
                        }
                    }
                    .E-ticket-right{
                        width:2rem;
                        height:1.07rem;
                        line-height:1.07rem;
                        float:right;
                        img{
                            width:1.07rem;
                            height:1.07rem;
                            float:left;
                        }
                        i{
                            width:0.4rem;
                            height:1.07rem;
                            float:right;
                            font-size: 30px;
                            transform: rotate(180deg);
                            display: block;
                            color:#E7E7E7;
                        }
                    }
                }
                .detailPrice{
                    width:100%;
                    height:0.61rem;
                    line-height:0.61rem;
                    font-size: 13px;
                    color: #333333;
                    span{
                        float:right;
                        font-size: 13px;
                    }
                }
                .detailPrice2{
                    width:100%;
                    height:0.61rem;
                    line-height:0.61rem;
                    font-size: 13px;
                    color: #333333;
                    span{
                        font-size: 15px;
                        color: #6699FF;
                        float:right;
                        font-weight: bold;
                    }
                }
                .detailName{
                    font-size: 14px;
                    color: #333333;
                    letter-spacing: 0;
                    font-weight: bold;
                    span{
                        margin-left:0.53rem;
                        font-size: 14px;
                    }
                }
                .detaiAddress{
                    width:100%;
                    line-height:0.53rem;
                    margin-top:0.13rem;
                    font-size: 13px;
                    color: #333333;
                    letter-spacing: 0;
                }
            }
            .integral{
                width:100%;
                height:1.33rem;
                line-height:1.33rem;
                padding:0 0.53rem;
                box-sizing: border-box;
                background:#fff;
                margin-top: 0.1333rem;
                font-size: 14px;
                color: #333333;
                letter-spacing: 0;
                span{
                    font-size: 16px;
                    color: #6699FF;
                    letter-spacing: 0;
                    line-height: 20px;
                    font-weight: bold;
                }
            }
        }
        .unpaidBtn{
            width:100%;max-width:450px;margin:0 auto;
            height:1.33rem;
            line-height:1.33rem;
            background:#fff;
            position:fixed;
            bottom:0;
            box-shadow: inset 0 1px 0 0 rgba(221,221,221,0.50);
            .unpaidBtn-no{
                width:3.2rem;
                height:1.33rem;
                line-height:1.33rem;
                text-align: center;
                background: #F0F7FF;
                box-shadow: inset 0 0 0 0 #C0CCDA;
                font-size: 16px;
                color: #6699FF;
                letter-spacing: 0;
                float:right;
            }
            .unpaidBtn-yes{
                width:3.2rem;
                height:1.33rem;
                line-height:1.33rem;
                text-align: center;
                background: #6699FF;
                box-shadow: inset 0 0 0 0 #C0CCDA;
                font-size: 16px;
                color: #FFFFFF;
                letter-spacing: 0;
                float:right;
            }
            .refund{
                width:2.13rem;
                height:0.9rem;
                line-height:0.9rem;
                text-align: center;
                border:1px solid #6699FF;
                font-size: 14px;
                color: #6699FF;
                letter-spacing: 0;
                box-shadow: inset 0 0 0 0 #C0CCDA;
                border-radius: 69px;
                float: right;
                margin-top: 0.2rem;
                margin-right: 0.53rem;
            }
        }
        .hint{
            width:2.67rem;
            height:2.3rem;
            background:#fff;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
            border-radius: 4px;
            position: fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            opacity: 0;
            animation: hint 1.5s ease 0s;
            p{
                font-size: 14px;
                color: #475669;
                letter-spacing: 0;
                line-height: 21px;
                text-align: center;
                i{
                    font-size:30px;
                    color:#13CE66;
                }
            }
            p:nth-child(1){
                margin-top:0.6rem;
            }
        }
        .delectBox{
            width:6rem;
            height:3rem;
            box-sizing: border-box;
            position: fixed;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
            text-align: center;
            border:1px solid #eee;
            background: #FFFFFF;
            box-shadow: 0 2px 20px 0 rgba(0,0,0,0.12);
            border-radius: 12px;
            z-index:1000;
            .delectBox-top{
                width:100%;
                height:1.8rem;
                line-height:1.8rem;
                text-align: center;
                font-size:14px;
                color: #333333;
            }
            .delectBox-btn{
                width:100%;
                height:1.2rem;
                font-size:14px;
                .yes{
                    width:50%;
                    height:1.2rem;
                    line-height:1.2rem;
                    float:right;
                    color:#007AFF;
                }
                .no{
                    width:calc(50% - 1px);
                    height:1.2rem;
                    line-height:1.2rem;
                    float:right;
                    color:#999;
                }
            }
        }
    }
    @keyframes hint{
        0%{
            -webkit-transform: scale(.1);
            -moz-transform: scale(.1);
            -o-transform: scale(.1);
            -ms-transform: scale(.1);
            transform: scale(.1);
            opacity: 0;
        }
        35%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
        95%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
        100%{
            -webkit-transform: scale(2.1);
            -moz-transform: scale(2.1);
            -o-transform: scale(2.1);
            -ms-transform: scale(2.1);
            transform: scale(2.1);
            opacity: 0;
        }
    }
</style>